<template>
  <a-modal
    :title="form && form.id ? '修改档案' : '新建档案'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="name" label="客户名称" prop="name">
          <a-input :disabled="disabled" placeholder="请输入客户名称" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="expireTime" label="合同到期日期" prop="expireTime">
          <a-date-picker class="full" v-model="form.expireTime" placeholder="请选择合同到期日期" />
        </a-form-model-item>
        <a-form-model-item ref="phone" label="联系电话" prop="phone">
          <a-input :disabled="disabled" :maxLength="11" placeholder="请输入联系电话" v-model="form.phone"/>
        </a-form-model-item>
        <a-form-model-item ref="sex" label="性别" prop="sex">
          <a-select :disabled="disabled" placeholder="请选择性别" v-model="form.sex">
            <a-select-option value="1">
              男
            </a-select-option>
            <a-select-option value="2">
              女
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="describe" label="需求" prop="describe">
          <a-textarea :disabled="disabled" placeholder="请输入需求" v-model="form.describe" :rows="4" />
        </a-form-model-item>
        <a-form-model-item ref="file" label="电子合同" prop="file">
            <a-upload
              :disabled="disabled"
              multiple
              :file-list="form.file"
              :customRequest="beforeUpload"
              :remove="handleRemove"
            >
              <a-button> <a-icon type="upload" /> 上传电子合同 </a-button>
            </a-upload>
          </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment';
import {upload} from "@/api/common";
import cloneDeep from 'lodash.clonedeep'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      form: {
        id: undefined,
        name: undefined,
        phone: undefined,
        expireTime: undefined,
        sex: '1',
        describe: undefined,
        file: [],
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        expireTime: [
          { required: true, message: '请选择合同到期日期', trigger: 'change' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        file: [
          { required: true, message: '请上传电子合同', trigger: 'change' },
        ],
        describe: [
          { required: true, message: '请输入需求', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      this.form.file = this.form.file.length > 0 ? this.form.file.split("|").map(e => {
          return {
            uid: this.generateUUID(),
            name: e,
            status: 'done',
            url: this.$staticPrefix(e),
            thumbUrl: this.$staticPrefix(e),
          }
      }) : []
    })
  },
  methods: {
    generateUUID() {
      var d = new Date().getTime();
      if(window.performance && typeof window.performance.now === "function"){
        d += performance.now();
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
      });
      return uuid;
    },
    beforeUpload(e) {
      const formatData = new FormData()
      formatData.append('file', e.file)
      upload(formatData).then(ret => {
        if (ret.success) {
          formatData.delete('file');
          this.form.file = [
            ...this.form.file,
            {
              uid: this.generateUUID(),
              name: ret.data,
              status: 'done',
              url: this.$staticPrefix(ret.data),
              thumbUrl: this.$staticPrefix(ret.data),
            },
          ]
        }
      })
    },
    handleRemove(e) {
      const index = this.form.file.findIndex(item => item.url === e.url)
      if (index > -1) {
        this.form.file.splice(index, 1);
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const file = cloneDeep(this.form.file)
          const form = {
            ...this.form,
            file: file.map(e => e.name).join("|")
          }
          this.$emit('ok', form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        name: undefined,
        expireTime: undefined,
        phone: undefined,
        sex: '1',
        describe: undefined,
        file: [],
      };
    },
  }
}
</script>
